<template>
  <view class="container">
    <view class="tabs">
      <view
        class="tab"
        :class="{ active: activeTab === 0 }"
        @click="activeTab = 0"
      >每日产出</view>
      <view
        class="tab"
        :class="{ active: activeTab === 1 }"
        @click="activeTab = 1"
      >出售记录</view>
    </view>
    <view v-if="activeTab === 0" class="tab-content">
      <view
        v-for="(item, index) in produceList"
        :key="index"
        class="record-item"
      >
        <view class="row">
          <text>晶核数: {{ item.count }}</text>
          <text>时间: {{ item.time }}</text>
        </view>
        <view class="row status_box">
          <text v-if="item.status === 'unclaimed'" class="status unclaimed">
            未领取
          </text>
          <view
            v-else-if="item.status === 'claimable'"
            class="claim-btn"
            @click="claim(index)"
          >
            点击领取
          </view>
          <text v-else class="status expired">已失效无法领取</text>
        </view>
      </view>
    </view>
    <view v-else class="tab-content">
      <view
        v-for="(item, index) in sellList"
        :key="index"
        class="record-item"
      >
        <view class="row">
          <text>时间: {{ item.time }}</text>
          <text>数量: {{ item.count }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      produceList: [
        {
          count: 10,
          time: '2024-06-01 10:00',
          status: 'unclaimed', // unclaimed, claimable, expired
        },
        {
          count: 8,
          time: '2024-06-02 10:00',
          status: 'claimable',
        },
        {
          count: 12,
          time: '2024-06-03 10:00',
          status: 'expired',
        },
      ],
      sellList: [
        {
          time: '2024-06-01 12:00',
          count: 5,
        },
        {
          time: '2024-06-02 13:00',
          count: 3,
        },
      ],
    };
  },
  methods: {
    claim(index) {
      // 模拟领取操作
      uni.showToast({
        title: '领取成功',
        icon: 'success',
      });
      this.$set(this.produceList, index, {
        ...this.produceList[index],
        status: 'unclaimed',
      });
    },
  },
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}
.tabs {
  display: flex;
  border-bottom: 2rpx solid #eee;
  margin-bottom: 20rpx;
}
.tab {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 32rpx;
  color: #888;
  border-bottom: 4rpx solid transparent;
}
.tab.active {
  color: #007aff;
  border-bottom: 4rpx solid #007aff;
  font-weight: bold;
}
.tab-content {
  min-height: 400rpx;
}
.record-item {
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx #f0f1f2;
  padding: 24rpx;
  margin-bottom: 20rpx;
}
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}
.status.unclaimed {
  color: #ff9900;
}
.status.expired {
  color: #ccc;
}
.claim-btn {
  background: #007aff;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  padding: 8rpx 24rpx;
  font-size: 28rpx;
}
.status_box{
	display: flex;
	justify-content: flex-end;
}
</style>
